<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.16/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div id="tVehicleCar">
    <div>
        <el-button type="primary" @click="dialogFormVisible = true" >添加车</el-button>
        <el-input v-model="input" placeholder="请输入车辆编号" style="width: 200px;"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="select">搜索</el-button>
        <div style="text-align: right">
            <el-input v-model="inputName" placeholder="请输入车辆名称" style="width: 200px;"></el-input>
            <el-input v-model="inputNumber" placeholder="请输入车牌号" style="width: 200px;"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="selectTwo">搜索</el-button>
        </div>
    </div>
    <el-dialog title="添加车" :visible.sync="dialogFormVisible" @close="closeDialog">
        <el-form ref="tVehicleCar" :model="tVehicleCar" label-width="80px">
            <el-form-item label="车辆名称">
                <el-input v-model="tVehicleCar.vehicleName"></el-input>
            </el-form-item>
            <el-form-item label="物流公司">
                <el-select v-model="tVehicleCar.logisticsId" placeholder="请选择物流公司">
                    <el-option :value="log.logisticsId" :label="log.logisticsName" v-for="log in Logistics"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="驾驶员" >
                <el-select v-model="tVehicleCar.driverId" placeholder="请选择驾驶人">
                    <el-option :value="driver.driverId" :label="driver.driverName" v-for="driver in Drivers"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="车牌号">
                <el-input v-model="tVehicleCar.numberPlate"></el-input>
            </el-form-item>
            <el-form-item label="车辆类型">
                <el-input v-model="tVehicleCar.vehicleType"></el-input>
            </el-form-item>
            <el-form-item label="尺寸">
                <el-input v-model="tVehicleCar.driverSize"></el-input>
            </el-form-item>
            <el-form-item label="载重">
                <el-input v-model="tVehicleCar.driverCapacity"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="tVehicleCar.remarks"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveTVehicleCar">确 定</el-button>
        </div>
    </el-dialog>

    <template>
        <el-table
                :data="tVehicleCars"
                style="width: 100%">
            <el-table-column
                    label="车牌编号">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.vehicleId}}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="车辆名称">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.vehicleName }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="车牌号">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.numberPlate }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="车辆类型">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.vehicleType }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="所属物业公司">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.logisticsId }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="驾驶员">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.driverId }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="车辆载重量">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.driverCapacity }}</span>
                </template>
            </el-table-column>

            <el-table-column
                    label="尺寸">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.driverSize }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :current-page="current"
                @current-change="loadTVehicleCars">
        </el-pagination>
    </template>
</div>
<script>
    new Vue({
        el:"#tVehicleCar",
        data(){
            return{
                tVehicleCars:[], //车辆信息
                Drivers:[],//驾驶人信息
                Logistics:[],//物流信息
                total:0,
                current:0,
                pageSize:10,
                input:'',
                inputName:'',
                inputNumber:'',
                tVehicleCar:{vehicleId:0,vehicleName:"",numberPlate:"",
                    vehicleType:"",logisticsId:0,driverId:0,driverCapacity:"",driverSize:"",remarks:""},
                dialogFormVisible:false,
            }
        },
        methods:{
            selectDriver(){
                axios.get("/CarDriverName")
                    .then(res => {
                        this.Drivers = res.data;
                    })
            },
            selectLogistics(){
                axios.get("/CarLogisticsName")
                    .then(res => {
                        this.Logistics = res.data;
                    })
            },
            select(){
                if(this.input == ''){
                    this.loadTVehicleCars(1,10);
                }else {
                    this.loadTVehicleCarsId(1,10,this.input);
                }
            },
            selectTwo(){
                if(this.inputName == '' && this.inputNumber == ''){
                    this.loadTVehicleCars(1,10);
                }else {
                    this.loadTVehicleCarsNameNumber(1,10,this.inputName,this.inputNumber);
                }
            },
            //分页查询
            loadTVehicleCars(current,pageSize){
                axios.get("/tVehicleCar/" + current + "/" + pageSize)
                    .then(res => {
                        this.tVehicleCars = res.data.records;
                        this.total = res.data.total;
                        this.current = res.data.current;
                    })
            },
            //分页查询车辆编号
            loadTVehicleCarsId(current,pageSize){
                let textId = this.input;
                axios.get("/tVehicleCar/" + current + "/" + pageSize + "/" + textId)
                        .then(res => {
                            this.tVehicleCars = res.data.records;
                            this.total = res.data.total;
                            this.current = res.data.current;
                        })
            },
            loadTVehicleCarsNameNumber(current,pageSize){
                let name = this.inputName;
                let number = this.inputNumber;
                if(name == ''){
                    axios.get("/tVehicleCar/" + current + "/"  + pageSize + "/" + null + "/" + number)
                        .then(res => {
                            this.tVehicleCars = res.data.records;
                            this.total = res.data.total;
                            this.current = res.data.current;
                        })
                }else if(number == ''){
                    axios.get("/tVehicleCar/" + current + "/"  + pageSize + "/" + name + "/" + null)
                        .then(res => {
                            this.tVehicleCars = res.data.records;
                            this.total = res.data.total;
                            this.current = res.data.current;
                        })
                }else {
                    axios.get("/tVehicleCar/" + current + "/"  + pageSize + "/" + name + "/" + number)
                        .then(res => {
                            this.tVehicleCars = res.data.records;
                            this.total = res.data.total;
                            this.current = res.data.current;
                        })
                }

            },
            handleEdit(index, row) {
                this.tVehicleCar = JSON.parse(JSON.stringify(row));
                this.selectDriver();
                this.selectLogistics();
                this.dialogFormVisible = true;
            },
            handleDelete(index, row) {
                axios.delete("/tVehicleCar/" + row.id)
                    .then(res => {
                        if(res.data == "ok"){
                            this.loadTVehicleCars(this.current,this.pageSize);
                        }
                    })
            },
            closeDialog(){
                this.tVehicleCar = {vehicleId:0,vehicleName:"",numberPlate:"",
                    vehicleType:"",logisticsId:0,driverId:0,driverCapacity:"",driverSize:""};
            },
            saveTVehicleCar(){
                let tVehicleCar = JSON.parse(JSON.stringify(this.tVehicleCar));
                if (tVehicleCar.vehicleId == 0){
                    axios.post("/tVehicleCar",tVehicleCar)
                        .then(res => {
                            if(res.data == "ok"){
                                this.dialogFormVisible = false;
                                this.loadTVehicleCars(this.current,this.pageSize);
                            }
                        })
                }else {
                    axios.put("/tVehicleCar",tVehicleCar)
                        .then(res => {
                            if(res.data == "ok"){
                                this.dialogFormVisible = false;
                                this.loadTVehicleCars(this.current,this.pageSize);
                            }
                        })
                }
            }

        },
        mounted(){
            this.loadTVehicleCars(1,10);

        }
    });
</script>
</body>
</html>